import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row, Tag, Select, Radio, InputNumber,Table } from 'antd';
import styles from './index.less';
import Editor from '@/utils/Editor';

const { Option } = Select;
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 20 },
};



class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values: [],
      slotIndex: "",
      itemIndex: "",
      index: "",
      slotArr: [],
      tableData:[ ]
    };

  }

  forMapSlotsOption = (option, type) => {
    switch (type) {
      case 'slot':
        return (
          <Option key={option.slotId} value={option.slotId}>#{option.slotName}#</Option>
        );
      case 'api':
        return (
          <Option key={option._id} value={option._id}>{option.name}</Option>
        );
      case 'field':
        return (
          <Option key={option.id} value={option.id}>{option.name}</Option>
        );
      default:
        return ''
    }
  };

  addTableData=()=>{
    const {data,updata} = this.props;
    data.mapping.push({
      apiField: "",
      slotId: "",
      fieldType: ""
    });
    updata(data);
  };

  setValueByChange=(e,type,isInput)=>{

    const {data,getApiDetail,updata} = this.props;
    if(isInput){
      if(type==='multiResultTitle'){
        data.resultTitle.multiResultTitle = e.target.value;
      }else if(type==='singleResultTitle'){
        data.resultTitle.singleResultTitle = e.target.value;
      } else{
        data[type] = e.target.value;
      }
    }else{
      data[type] = e;
    }
    if(type==='apiId'){
      getApiDetail(e);
    }
    updata(data);
  };

  updataMapping =(e,index,type)=>{
    const {data,updata,updataField} = this.props;
    data.mapping[index][type]=e;
    if(type === 'fieldType'){
      data.mapping[index].apiField='';
    }
    updata(data);
  };

  delMappingItemByIndex=(index)=>{
    const {data,updata} = this.props;
    data.mapping.splice(index,1);
    updata(data);
  };

  getEditContent=()=>{
    return  this.refs['resultTemplate'].getUeditorContent();
  };


  render() {
    const { apiData,dialogs,data,fields } = this.props;
    const apiOptElem = apiData.map((item) => this.forMapSlotsOption(item, 'api'));
    const SlotOpElem = dialogs.map((item,idx)=>this.forMapSlotsOption(item,'slot'));
    // const fieldOptElem = fields.map((item,idx)=>this.forMapSlotsOption(item,'field'));
    const columns=[
      {
        title: '词槽',
        dataIndex: 'slotId',
        key: 'slotId',
        width:'120px',
        render: (text,record,index)=>{
          return(
            <Select
              style={{ width: 120 }} placeholder="请选择" value={record.slotId} onChange={(e)=>this.updataMapping(e,index,'slotId')}>
              {SlotOpElem}
            </Select>
          )
        },
      },
      {
        title: 'API字段',
        dataIndex: 'apiField',
        key: 'apiField',
        render: (text,record,index)=>{
          return(
            <div>
              <Select
                style={{ width: 150 }} value={record.fieldType} placeholder="请选择" onChange={(e)=>this.updataMapping(e,index,'fieldType')}>
                <Option key="request" value="request">请求字段</Option>
                <Option key="response" value="response">返回字段</Option>
              </Select>
              -
              <Select
                style={{ width: 150 }} placeholder="请选择" value={record.apiField}  onChange={(e)=>this.updataMapping(e,index,'apiField')}>
                {/*{fieldOptElem}*/}
                {
                  record.fieldType === 'request'?
                    fields.requestFields.map((item,idx)=>this.forMapSlotsOption(item,'field')):
                    fields.responseFields.map((item,idx)=>this.forMapSlotsOption(item,'field'))
                }
              </Select>
            </div>
          )
        },
      },
      {
        title: '操作',
        width:'120px',
        render: (text, record, index) => <Button icon="delete" type="danger" onClick={()=>this.delMappingItemByIndex(index)}>删除</Button>
      }]
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Row>
            <Col span={4} style={{ marginLeft: 5 }}>
              查询数据来源
            </Col>
            <Col span={6}>
              <Radio checked>自定义API接口</Radio>
            </Col>
            <Col spam={10}>
              <Select
                placeholder="请选择" value={data.apiId} className={styles.selectItem} onChange={(e)=>this.setValueByChange(e,'apiId')}>
                {apiOptElem}
              </Select>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={6} style={{ borderLeft: "3px solid #222", marginLeft: 10 }}>词槽-字段对应</Col>
            <Col style={{marginTop:40}}>
              <Table columns={columns} dataSource={data.mapping} bordered pagination={false} />
              <Button type="primary" htmlType='button' icon="plus" onClick={()=>this.addTableData()} style={{marginTop:20}}>添加</Button>
            </Col>
            <Col style={{marginTop:20}}>
              <span style={{marginRight:10}}>唯一性词槽</span>
              <Select
                style={{ width: 120 ,marginRight:10}} placeholder="请选择" value={data.uniqueSlot} onChange={(e)=>this.setValueByChange(e,'uniqueSlot')}>
                {SlotOpElem}
              </Select>
              <Input value={data.field} onChange={(e)=>this.setValueByChange(e,'field',true)} style={{width:200,marginRight:10}} />
            </Col>
            <Col span={22} style={{ borderLeft: "3px solid #222", marginLeft: 10,marginTop:20 }}>结果展示模版</Col>
          </Row>
          <Row style={{marginTop:20}}>
            <Col span={3} style={{marginTop:5}}>
              结果展示话术
            </Col>
            <Col span={20}>
              <Input value={data.resultTitle.multiResultTitle} onChange={(e)=>this.setValueByChange(e,'multiResultTitle',true)} style={{width:500,marginRight:10}} />
            </Col>
          </Row>
          <Row style={{marginTop:20}}>
            <Editor content={data.resultTemplate} name='resultTemplate' id='resultTemplate' ref={'resultTemplate'} />
          </Row>
          <Row style={{marginTop:20}}>
            <Col span={22} style={{ borderLeft: "3px solid #222", paddingLeft: 10}}>特殊情况处理</Col>
          </Row>
          <Row>
            <Col span={5} style={{marginTop:20}}>
              只有一条筛选结果时
            </Col>
            <Col span={19} style={{marginTop:20}}>
              <Radio.Group onChange={(e)=>this.setValueByChange(e,'filter',true)} value={data.filter}>
                <Radio value="keep_on">不结束筛选继续询问</Radio>
                <Radio value="select_first_then_exit">直接选中该结果，并结束询问</Radio>
              </Radio.Group>
            </Col>
            {
              data.filter === 'keep_on'?
                <Col span={20} offset={4}>
                  询问话术 <Input value={data.resultTitle.singleResultTitle} onChange={(e)=>this.setValueByChange(e,'singleResultTitle',true)} style={{width:500,marginRight:20,marginTop:10}} />
                </Col>
                :''
            }
          </Row>
          <Row>
            <Col span={3} offset={2} style={{marginTop:20}}>
              筛选无结果时
            </Col>
            <Col span={19} style={{marginTop:20}}>
              <Radio.Group onChange={(e)=>this.setValueByChange(e,'noResFilter',true)} value={data.noResFilter}>
                <Radio value="keep_on">不结束筛选继续询问</Radio>
                <Radio value="direct_exit">直接结束筛选</Radio>
              </Radio.Group>
            </Col>
            {
              data.noResFilter === 'keep_on'?
                <Col span={20} offset={4}>
                  询问话术 <Input value={data.noResultTitle} onChange={(e)=>this.setValueByChange(e,'noResultTitle',true)} style={{width:500,marginRight:20,marginTop:10}} />
                </Col>
                :''
            }
          </Row>
        </Suspense>
      </GridContent>
    );
  }
}
export default connect(({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(Item));
